 <template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
     <selectSite
      ref="selectSite"
      :boxDialogVisible="chooseSiteConfig.editVisible"
      :title="chooseSiteConfig.title"
      :multi="false"
      @close="chooseSiteConfig.editVisible = false"
      @save="chooseSiteCallback"
    />
     <selectProduct
      ref="selectProduct"
      :boxDialogVisible="chooseProductConfig.editVisible"
      :title="chooseProductConfig.title"
      :multi="false"
      @close="chooseProductConfig.editVisible = false"
      @save="chooseProductCallback"
    />

        <el-form ref="form" :model="form" size="small" label-width="80px">
          <el-input v-model="form.id" style="width: 370px;display:none;" />
          <el-input v-model="form.siteid" style="display:none;" />
          <el-input v-model="form.pid" style="display:none;" />
          <el-form-item class="col-two" label="场地">
            <el-input v-model="form.siteName" style="width: 370px;" readonly/>
            <el-button type="text" @click="chooseSite()">选择</el-button>
          </el-form-item>
          <el-form-item class="col-two" label="所属产品">
            <el-input v-model="form.pname" style="width: 370px;" readonly/>
            <el-button type="text" @click="chooseProduct()">选择</el-button>
          </el-form-item>
          <el-form-item class="col-two" label="名称">
            <el-input v-model="form.name" style="width: 370px;" />
          </el-form-item>
          <el-form-item class="col-two" label="编码">
            <el-input v-model="form.ecode" style="width: 370px;" />
          </el-form-item>
          <el-form-item class="col-two" label="位置">
            <el-input v-model="form.location" style="width: 370px;" />
          </el-form-item>
          <el-form-item class="col-two" label="是否在用">
              <el-radio-group v-model="form.inuse" style="width: 178px">
                <el-radio-button label="1">是</el-radio-button>
                <el-radio-button label="2">否</el-radio-button>
              </el-radio-group>
          </el-form-item>
          <el-form-item class="col-two" label="单位">
            <el-input v-model="form.unitname" style="width: 370px;" />
          </el-form-item>
          <el-form-item class="col-two" label="说明">
            <el-input v-model="form.desci" style="width: 370px;" />
          </el-form-item>
          <el-form-item class="col-two" label="最小值">
            <el-input v-model="form.limitlow" style="width: 370px;" />
          </el-form-item>
          <el-form-item class="col-two" label="最大值">
            <el-input v-model="form.limitupper" style="width: 370px;" />
          </el-form-item>
          <el-form-item class="col-two" label="使用日期">
          <el-date-picker
		      v-model="form.usedate"
		      type="date"
		      placeholder="选择日期">
		    </el-date-picker>
          </el-form-item>
          <el-form-item class="col-two" label="状态">
			  <el-radio-group v-model="form.estatus" style="width: 240px">
                <el-radio-button label="1">正常</el-radio-button>
                <el-radio-button label="2">数据异常</el-radio-button>
                <el-radio-button label="3">心跳异常</el-radio-button>
              </el-radio-group>
          </el-form-item>
          <el-form-item class="col-two" label="设备类型">
            <el-input v-model="form.etype" style="width: 370px;display:none" /> 
            <el-input v-model="extObj.etypeName" style="width: 370px;" readonly/> 
            <el-button type="text" @click="chooseEtype()">选择</el-button>

<!--             <el-select v-model="form.etype" placeholder="请选择">
              <el-option
                v-for="item in extObj.etype"
                :key="item.k"
                :label="item.val"
                :value="Number(item.k)">
              </el-option>
            </el-select> -->
            <selectTree
              ref="selectTree"
              :boxDialogVisible="selectEtypeConfig.editVisible"
              :checkedNode="selectEtypeConfig.checked"
              :iconConfig="selectEtypeConfig.iconConfig"
              :defaultProps="selectEtypeConfig.defaultProps"
              :searchConfig="selectEtypeConfig.search"
              :title="selectEtypeConfig.title"
              :multi="false"
              :leafOnly="false"
              :dictId="selectEtypeConfig.dictId"
              @close="selectEtypeConfig.editVisible = false"
              @save="selectEtypeCallBack"
            /> 
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          <el-button type="text" @click="closeBack()">返回</el-button>
        </div>
    </div>
  </div>  
</template>    
        

<script>
import myUpload from 'vue-image-crop-upload'
import checkPermission from '@/utils/permission'
import crudIotEquip from '@/api/iot/iotEquip'
import crudIotSite from '@/api/iot/iotSite'
import { mapGetters } from 'vuex'
import store from '@/store'
import { getToken } from '@/utils/auth'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import customOperation from "@crud/customOperation"
import selectSite from '../site/selectSite'
import selectProduct from '../product/selectProduct'
import selectTree from '@/components/selectBox/selectTree'

const defaultForm = { id: null, siteid: null, pid: null, name: null, ecode: null, location: null, inuse: null, unitname: null, desci: null, limitlow: null, limitupper: null, usedate: null, estatus: null, etype: null, x: null, y: null, z: null, l: null, w: null, h: null, appid: null, rx: null, ry: null, rz: null }
export default {
  name: 'equipAdd',
  components: { crudOperation, rrOperation, udOperation, customOperation, myUpload, selectSite, selectProduct, selectTree, crudIotSite },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '场地', sort: 'id,desc', crudMethod: { ...crudIotEquip }})
  },
  data() {
    return {
      headers: {
        'Authorization': getToken()
      },
      showUpload: false,
      uploadUrl: '/files',
      uploadParam: {
        dataId: this.$route.query._PK_
      },
      extObj: {},
      chooseSiteConfig: {
        editVisible: false,
        title: "场地选择"
      },
      chooseProductConfig: {
        editVisible: false,
        title: "产品选择"
      },
      selectEtypeConfig: {
        iconConfig: {
          parentType: {
            key: "pre",
            icon: "el-icon-edit"
          },
          childrenType: {
            key: "permission",
            icon: "el-icon-share"
          }
        },
        editVisible: false,
        title: "选择设备类型",
        dictId: "equipType",
        listStyle: "tree",
        search: {
          title: "请输入",
          http: "",
          key: "name",
          params: {}
        },
        defaultProps: {
          id: "id",
          label: "name",
          children: "children",
          isLeaf: "isLeaf"
        },
        checked: []
      }      
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },  
  created() {
    const query = this.$route.query
  },
  mounted: function() {
    debugger
    const query = this.$route.query
    if (query._PK_) { // 后端获取数据
      this.edit = true
      crudIotEquip.getById(query._PK_).then(res => {
      	this.extObj = res.extObj;
        Object.assign(this.form, res)
      })
    } else {
      if (query.parentQuery && query.parentQuery.siteid) {
        crudIotSite.getById(query.parentQuery.siteid).then(res => {
          this.form.siteid = query.parentQuery.siteid
          this.form.siteName = res.sitename
        })
      }
    }
  },
  methods: {
    checkPermission,
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return false
    },
    submit() {
      debugger
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = 2
        this.edit ? this.customEdit() : this.customAdd()
      })
    },
    closeBack() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },    
    chooseEtype() {
      this.selectEtypeConfig.checked = [this.form.etype]
      this.selectEtypeConfig.editVisible = true
    },
    selectEtypeCallBack(adds, dels, selects) {
      this.selectEtypeConfig.editVisible = false;
      if (selects && selects.length == 1) {
        this.form.etype = selects[0].id
        this.extObj.etypeName = selects[0].name
      }
    },   
    /**
     * 执行自定义添加
     */
    customAdd() {
      this.crud.crudMethod
        .add(this.form)
        .then((res = {}) => {
          this.loading = 0
          if (res.RTN_CODE && res.RTN_CODE === 'ERROR') {
            this.crud.notify(res.MSG, CRUD.NOTIFICATION_TYPE.ERROR)
          } else {
            this.edit = true
            this.crud.addSuccessNotify()
            this.form.id = res.id
          }
        })
        .catch(e => {
          this.loading = 0
          console.error(e)
        })
    },
    /**
     * 执行自定义编辑
     */
    customEdit() {
      this.crud.crudMethod
        .edit(this.form)
        .then(() => {
          this.loading = 0
          this.crud.editSuccessNotify()
        })
        .catch(e => {
          this.loading = 0
          console.error(e)
        })
    },
    closeBack() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    cropUploadSuccess(jsonData, field) {
      this.form.imgfile = jsonData.id
    },
    toggleShowUpload() {
      this.showUpload = !this.showUpload
    },
    chooseSite() {
      this.chooseSiteConfig.editVisible = true;
    },
    chooseSiteCallback(site) {
      if (site && site.length == 1) {
        this.form.siteid = site[0].id;
        this.form.siteName = site[0].sitename;
      }

      this.chooseSiteConfig.editVisible = false;
    },    
    chooseProduct() {
      this.chooseProductConfig.editVisible = true;
    },
    chooseProductCallback(product) {
      if (product && product.length == 1) {
        this.form.pid = product[0].id;
        this.form.pname = product[0].name;
      }

      this.chooseProductConfig.editVisible = false;
    },   

  }
}
</script>          


<style type="text/css">
.col-two {
  width: 49%;
  display: inline-block;
}  
</style>>